<!DOCTYPE html>
<title>usersDropdown</title>
<meta charset="utf-8">
<link rel="import" href="../chops-user-dropdown.html">
<script srx="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>

<test-fixture id="chops-user-dropdown-test">
  <template>
    <chops-user-dropdown></chops-user-dropdown>
  </template>
</test-fixture>

<script>
  'use strict';

  suite('chops-user-dropdown', function() {
    var element;
    setup(function() {
      element = fixture('chops-user-dropdown-test');
      element.suggestions = ['blah', 'blahman', 'blahdimir'];
    });

    test('toggle', function(done) {
      flush(function() {
        assert.isTrue(element.$.dropdown.classList.contains('hidden'));
        element.open();
        assert.isFalse(element.$.dropdown.classList.contains('hidden'));
        element.close();
        assert.isTrue(element.$.dropdown.classList.contains('hidden'));
        done();
      });
    });

    test('observer', function(done) {
      flush(function() {
        element.open();
        element.push('suggestions', 'blah Sr.');
        assert.equal(element.suggestions.length, 4);
        done();
      });
    });

    test('user-selected', function(done) {
      element.addEventListener('user-selected', (event) => {
        assert.equal(event.detail.selectedUser, 'blahdimir');
        done();
      });
      flush(function() {
        let items = element.shadowRoot.querySelectorAll('paper-item');
        items[2].click();
      });
    });
  });
</script>
